window.onload = function () {
    const boxitemNumber = 4;

    let boxmain = document.getElementById('boxmain');
    let go = document.getElementById('go');
    // let count = document.getElementById('count');
    let audio = document.getElementById('music');
    let link = document.getElementById('link');
    let speed = 5, num = 0, lastNum = 0;
    let iconcolor = ['#f07c82', '#d276a3', '#2f90b9', '#12a182',
        '#bacf65', '#fed71a', '#ff9900', '#f9723d'];
    let boxcolor = ['#e1bf6c', '#e1bf6c', '#e1bf6c'];
    let iconcnt = link.children.length / 2;

    audio.loop = false;
    audio.addEventListener('ended', function () {
        gameSuccess();
    }, false);

    function replay() {
        audio.currentTime = 0;
        audio.play();
    }

    function gameStart() {
        replay();
        boxmain.innerHTML = '';
        boxmain.style.top = '-150px';
        // count.innerHTML = '开始';
        go.style.display = "none";
    }

    function gameFailed() {
        audio.pause();
        boxmain.style.top = '-150px';
        // count.innerHTML = '游戏结束，最高得分: ' + num;
        clearInterval(boxmain.timer);
        go.children[0].innerHTML = '游戏结束';
        go.style.display = "block";
    }

    function gameSuccess() {
        // boxmain.style.top = '-150px';
        clearInterval(boxmain.timer);
        go.children[0].innerHTML = '南邮80周年校庆快乐';
        go.style.display = "block";
    }

    function addLink() {
        while (iconcnt) {
            let idx = Math.floor(Math.random() * link.children.length);
            if (getComputedStyle(link.children[idx], null)['display'] == 'none') {
                link.children[idx].style.display = 'flex';
                iconcnt--;
                break;
            }
        }
    }

    // function createBoxline(num) {
    //     let boxline = document.createElement('div');
    //     boxline.className = 'boxline';

    //     for (let i = 0; i < boxitemNumber; i++) {
    //         let boxitem = document.createElement('div');
    //         boxline.appendChild(boxitem);
    //     }

    //     if (boxmain.children.length == 0) {
    //         boxmain.appendChild(boxline);
    //     } else {
    //         boxmain.insertBefore(boxline, boxmain.children[0]);
    //     }

    //     if (num % 10 == 0 && num != lastNum) {
    //         lastNum = num;
    //         let index = Math.floor(Math.random() * 4);
    //         let iconindex = Math.floor(Math.random() * iconcolor.length);
    //         boxline.children[index].style.backgroundColor = iconcolor[iconindex];
    //         boxline.children[index].className = 'boxicon';
    //     }
    //     else {
    //         let index = Math.floor(Math.random() * 4);
    //         boxline.children[index].style.backgroundColor = '#000000';
    //         boxline.children[index].className = "boxblack";
    //     }
    // }

    function createSlogan(boxline, text) {
        boxline.innerHTML = text;
        boxline.style.display = 'table-cell';
        boxline.style.verticalAlign = 'middle';
        boxline.style.textAlign = 'center';
        boxline.style.fontSize = '30px';
        // boxline.style.background = '#fcc307';
        // boxline.style.color = '#ffffff';
        boxline.style.color = '#fcc307';
    }

    function createBoxline(idx) {
        let boxline = document.createElement('div');
        boxline.className = 'boxline';
        
        if (idx == 1942) {
            createSlogan(boxline, "1942年 战邮干训班");
        }
        else if (idx == 1958) {
            createSlogan(boxline, "1958年 组建为本科院校");
        }
        else if (idx == 1978) {
            createSlogan(boxline, "1978年 首批招收硕士研究生");
        }
        else if (idx == 1998) {
            createSlogan(boxline, "1998年 取得博士学位授予权");
        }
        else if (idx == 2007) {
            createSlogan(boxline, "2007年 设立博士后流动站");
        }
        else if (idx == 2017) {
            createSlogan(boxline, "2017年 国家首批\n“双一流”建设高校");
        }
        else if (idx == 2022) {
            createSlogan(boxline, "2022年 第二轮\n“双一流”建设高校");
        }
        else {
            for (let i = 0; i < boxitemNumber; i++) {
                let boxitem = document.createElement('div');
                boxline.appendChild(boxitem);
            }

            let index = Math.floor(Math.random() * boxitemNumber);
            boxline.children[index].style.backgroundColor = boxcolor[idx % boxcolor.length];
            boxline.children[index].innerHTML = idx + '';
            // boxline.children[index].style.verticalAlign = 'middle';
            // boxline.children[index].style.display = 'table-cell';
            
            // boxline.children[index].style.textAlign = 'center';
            
            boxline.children[index].className = 'boxblack';

        }

        if (boxmain.children.length == 0) {
            boxmain.appendChild(boxline);
        } else {
            boxmain.insertBefore(boxline, boxmain.children[0]);
        }
    }

    function move() {
        speed = 5, num = 0;
        let cnt = 1942;

        boxmain.timer = setInterval(function () {
            boxmain.style.top = parseInt(getComputedStyle(boxmain, null)['top']) + speed + 'px';

            if (cnt == 2025) {
                gameSuccess();
                return;
            }

            if (parseInt(getComputedStyle(boxmain, null)['top']) >= 0) {
                if (cnt < 2023) {
                    createBoxline(cnt);
                }
                cnt++;
                boxmain.style.top = '-150px';
            }

            if (boxmain.children.length == 6) {
                for (let i = 0; i < boxmain.lastChild.children.length; i++) {
                    if (boxmain.lastChild.children[i].className != '') {
                        gameFailed();
                        return;
                    }
                }
                boxmain.removeChild(boxmain.lastChild);
            }

            boxmain.onmousedown = function (event) {
                if (event.target.className == 'boxblack') {
                    // event.target.style.backgroundColor = "#bbb";
                    event.target.style.backgroundColor = "#ffffff00";
                    event.target.innerHTML = '';
                    event.target.className = '';
                    // count.innerHTML = '当前得分: ' + ++num;
                }
                else if (event.target.className == 'boxicon') {
                    addLink();
                    event.target.style.backgroundColor = "#bbb";
                    event.target.className = '';
                    // count.innerHTML = '当前得分: ' + ++num;
                }
                else {
                    gameFailed();
                    return;
                }

                if (num++ % 20 == 0) {
                    speed++;
                }
            }
        }, 20)
    }

    go.children[0].onclick = function () {
        gameStart();
        move();
    }
}